<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
  <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
  <script type="text/javascript" src="../../static/js/underscore.js"></script>
  <script type="text/javascript" src="../../static/js/pixel_ops.js"></script>

  <script>
  $(document).ready(function(){
        // generate rgba image based on bitmap
        function generate_pixels(bm) {
            var pixels = [];
            for(var i=0; i < bm.length; ++i) {
                var p = bm[i];
                pixels.push(p);
                pixels.push(p);
                pixels.push(p);
                pixels.push(p);
            }
            return pixels;
        }

        // test bitmap
        var bitmap= [0, 0, 0, 0, 0, 0,
                     0, 1, 1, 1, 1, 0,
                     0, 1, 1, 1, 1, 0,
                     0, 1, 1, 1, 1, 0,
                     0, 1, 1, 1, 1, 0,
                     0, 1, 1, 1, 1, 0,
                     0, 0, 0, 0, 0, 0];

        var small_bitmap=   [0, 0, 0, 0,
                             0, 1, 1, 0,
                             0, 1, 1, 0,
                             0, 0, 0, 0];
        var one_px_bitmap=   [0, 0, 0, 0,
                             0, 1, 0, 0,
                             0, 0, 0, 0,
                             0, 0, 0, 0];

        var bitmap_hole =   [2, 2, 2, 2, 2, 2, 2, 2,
                             2, 1, 1, 1, 1, 1, 1, 2,
                             2, 1, 1, 1, 1, 1, 1, 2,
                             2, 1, 1, 2, 2, 2, 1, 2,
                             2, 1, 1, 2, 2, 2, 1, 2,
                             2, 1, 1, 2, 2, 2, 1, 2,
                             2, 1, 1, 1, 1, 1, 1, 2,
                             2, 1, 1, 1, 1, 1, 1, 2,
                             2, 2, 2, 2, 2, 2, 2, 2];

        var bitmap_hole_2 = [2, 2, 2, 2, 2, 2, 2, 2,
                             2, 1, 1, 1, 1, 1, 1, 2,
                             2, 1, 1, 1, 1, 1, 1, 2,
                             2, 1, 1, 2, 2, 1, 1, 2,
                             2, 1, 1, 1, 1, 1, 1, 2,
                             2, 1, 1, 2, 2, 1, 1, 2,
                             2, 1, 1, 1, 1, 1, 1, 2,
                             2, 1, 1, 1, 1, 1, 1, 2,
                             2, 2, 2, 2, 2, 2, 2, 2];

        var pixels = generate_pixels(bitmap);
        
        module("flood_fill");
        test("should replace color of adyacent pixels", function() {
          var px = pixels.slice();
          var poly = flood_fill(px, 6, 6, 1, 1, [255, 254, 253]);
          for(var i=1; i<5; ++i) {
            for(var j=1; j<5; ++j) {
                var p = 4*(i*6 + j);
                equals(px[p], 255);
                equals(px[p + 1], 254);
                equals(px[p + 2], 253);
                    
            }
          }
        });

        module("contour");

        test("should contour a shape with same color", function() {
          var poly = contour(generate_pixels(bitmap), 6, 6, 1, 1);
          equals( poly.length, 14 ,"test");
          var poly = contour(generate_pixels(bitmap), 6, 6, 3, 3);
          equals( poly.length, 14 ,"test");
        });

        test("should contour a small shape with same color", function() {
          var poly = contour(generate_pixels(small_bitmap), 4, 4, 1, 1);
          equals( poly.length, 4 ,"test");
        });

        test("should does NOT contour 1px shape with same color", function() {
          var poly = contour(generate_pixels(one_px_bitmap), 4, 4, 1, 1);
          equals( poly.length, 0 ,"test");
        });

        test("should contour a shape with holes with same color", function() {
          var poly = contour(generate_pixels(bitmap_hole), 8, 8, 1, 1);
          equals( poly.length, 22 ,"test");
          var poly = contour(generate_pixels(bitmap_hole), 8, 8, 3, 2);
          equals( poly.length, 22 ,"test");
        });

        test("should find holes", function() {
          var outer_poly = contour(generate_pixels(bitmap_hole), 8, 8, 2, 2);
          var poly = inner_polygons(generate_pixels(bitmap_hole), 8, 8, outer_poly, [1,1,1]);
          equals( poly.length, 1 ,"test");
          equals( poly[0].length, 8 ,"test");
          equals( poly[0][0][0], 3 ,"test");
          equals( poly[0][0][1], 4 ,"test");
            
        });
        test("should find 2 holes", function() {
          var outer_poly = contour(generate_pixels(bitmap_hole_2), 8, 8, 2, 2);
          var poly = inner_polygons(generate_pixels(bitmap_hole_2), 8, 8, outer_poly, [1,1,1]);
          equals( poly.length, 2 ,"test");
          equals( poly[0].length, 2 ,"test");
          equals( poly[1].length, 2 ,"test");
        });

  });
  </script>
  
</head>
<body>
  <h1 id="qunit-header">QUnit example</h1>
 <h2 id="qunit-banner"></h2>
 <div id="qunit-testrunner-toolbar"></div>
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
